<template>
    <div class="header">
        <div class="left logo_content">
            <img src="@/assets/img/logo.png" alt="logo png" class="logo_img" />
        </div>
        <div class="right header_detail">
            <div class="">
                <p class="text_right">
                    白内障病科
                </p>
                <ul class="">
                    <li>
                    </li>
                    <li>
                        玛丽
                    </li>
                    <li>
                        登录时间:
                        <span class="time">
                            8:00
                        </span>
                        <router-link to="/login">退出</router-link>
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component
    export default class Header extends Vue {

    }
</script>


<style lang="scss" scoped>

    .header{

        overflow:hidden;


        

        padding:0.2rem 0.25rem;

        .logo_content{

            width:25%;
            position: relative;
            height: 45px;
            max-width:230px;
            .logo_img{

                width:100%;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;

            }
        }

        .header_detail{

            ul{
                li{
                    color:$grey_p;
                    margin-left:0.1rem;
                }
            }
        }
        
    }
    


</style>